<template>
  <view class="container" v-if="!isLoding">
    <z-paging-swiper>
      <view slot="top">
        <u-navbar :border-bottom="false" title-color="#333">
          <view class="slot-wrap">
            <view class="search-box dis-flex flex-y-center">
              <u-icon class="search-icon" name="/static/search.png" size="32"></u-icon>
              <input
                @blur="searchGoods"
                v-model="keywords"
                class="input"
                placeholder="请输入商品搜索"
              />
            </view>
          </view>
        </u-navbar>
        <view class="mer-top dis-flex flex-y-center" v-if="shopInfo">
          <view style="border: 1rpx solid #f3f4f6; border-radius: 10rpx">
            <u-image
              :src="shopInfo.logo"
              width="150rpx"
              height="150rpx"
              border-radius="10"
            ></u-image>
          </view>
          <view class="mer-info dis-flex flex-y-around">
            <view class="title">{{ shopInfo.name }}</view>
            <view class="houre dis-flex flex-y-center flex-y-between">
              <view class="star dis-flex flex-y-center">
                <u-icon style="margin-bottom: 4rpx" name="/static/1.png" size="36"></u-icon>
                <text class="goods-star">{{ shopInfo.score }}分</text>
                <text class="mer-label">{{ shopInfo.categoryName }}</text>
              </view>
              <u-icon
                @click="phone(shopInfo.contactMobile)"
                class="h-icon"
                name="/static/bh.png"
                size="32"
              ></u-icon>
            </view>
            <view class="houre dis-flex flex-y-center flex-y-between">
              <view class="address oneline-hide-1">
                <u-icon
                  style="position: relative; top: 6rpx"
                  class="h-h-icon"
                  name="/static/dw-h.png"
                  size="28"
                ></u-icon>
                <text>{{ shopInfo.provinceCityCounty }}{{ shopInfo.detailAddress }}</text>
              </view>
              <u-icon class="h-icon" name="/static/dhd.png" size="32" @click="dhd()"></u-icon>
            </view>
          </view>
        </view>
        <u-gap height="20"></u-gap>
      </view>

      <view class="tabsView">
        <u-tabs-swiper
          ref="uTabs"
          :list="tabsList"
          :current="current"
          @change="tabsChange"
          :is-scroll="false"
          :show-bar="false"
          active-color="#10A28F"
          swiper-width="750"
          height="100"
          font-size="32"
        >
        </u-tabs-swiper>
      </view>
      <u-gap height="20"></u-gap>
      <swiper
        class="swiperView"
        :current="scurrent"
        @transition="transition"
        @animationfinish="animationfinish"
      >
        <swiper-item v-for="(item2, index2) in tabsList" :key="index2" class="swiperItem">
          <z-paging
            ref="paging"
            v-model="itemList[scurrent]"
            @query="queryList"
            :fixed="true"
            :auto="false"
            :empty-view-img="`${getImageUrl('empty.png')} `"
            empty-view-text="暂无数据~"
            :empty-view-img-style="imgStyle"
          >
            <GoodsBox :itemList="itemList[scurrent]"></GoodsBox>
          </z-paging>
        </swiper-item>
      </swiper>
    </z-paging-swiper>
  </view>
</template>

<script>
import GoodsBox from './components/goods_box.vue'
export default {
  components: {
    GoodsBox
  },
  data() {
    return {
      isLoding: true,
      isFollow: true,
      keywords: '',
      shopId: null,
      shopInfo: null,
      tabsList: [
        {
          name: '商品分类'
        },
        {
          name: '商品分类'
        },
        {
          name: '商品分类'
        },
        {
          name: '商品分类'
        },
        {
          name: '商品分类'
        }
      ],
      scurrent: 0,
      current: 0,
      imgStyle: {
        width: '12rem'
      },
      itemList: null
    }
  },
  onLoad(options) {
    this.shopId = options.shopId || 1
    this.$u
      .get('/app-api/shop/info/get', {
        id: this.shopId
      })
      .then((res) => {
        this.shopInfo = res.data
      })
    this.$u
      .get('/app-api/product/category/list', {
        shopId: this.shopId
      })
      .then((res) => {
        this.tabsList = res.data
        let newItemList = []
        if (this.tabsList.length > 0) {
          this.tabsList.forEach((tab) => {
            newItemList.push([])
          })
        }
        this.itemList = newItemList
        this.isLoding = false
        this.queryList()
      })
      .catch(() => {
        this.isLoding = false
      })
  },
  created() {
    // this.queryList()
  },
  methods: {
    tabsChange(index) {
      this.scurrent = index
    },
    transition(e) {
      let dx = e.detail.dx
      this.$refs.uTabs.setDx(dx)
    },
    animationfinish(e) {
      this.current = e.detail.current
      this.scurrent = e.detail.current
      this.$refs.uTabs.setFinishCurrent(e.detail.current)
      if (this.itemList[this.scurrent].length == 0) {
        this.queryList()
      }
    },
    searchGoods() {
      this.queryList()
    },
    queryList(pageNo = 1, pageSize = 10) {
      this.$u
        .get('/app-api/product/spu/page-by-product-category', {
          shopId: this.shopId,
          keywords: this.keywords,
          categoryId: this.tabsList[this.scurrent].id,
          status: 1,
          pageNo,
          pageSize
        })
        .then((res) => {
          // 使用 scurrent 来确定需要调用的分页组件
          // let pagingRef = `paging1${this.scurrent}`;
          this.$refs.paging[this.current].complete(res.data.list)
        })
    },
    phone(phone) {
      uni.makePhoneCall({
        phoneNumber: phone
      })
    },
    dhd() {
      uni.openLocation({
        latitude: Number(this.shopInfo.latitude), //要去的纬度
        longitude: Number(this.shopInfo.longitude), //要去的经度
        address: this.shopInfo.detailAddress || '' //要去的具体地址
      })
    }
  }
}
</script>

<style lang="scss">
.slot-wrap {
  display: flex;
  align-items: center;
  .search-box {
    width: 420rpx;
    height: 60rpx;
    background: #f0f0f0;
    border-radius: 30rpx;
    padding: 0 20rpx;
    .search-icon {
      margin-right: 15rpx;
    }
    .input {
      font-size: 28rpx;
      color: #999999;
    }
  }
}
.tabsView {
  height: 100rpx;
}
.mer-top {
  width: 100%;
  height: 200rpx;
  background: #ffffff;
  padding: 20rpx;
  position: relative;
  margin-top: 20rpx;
  .mer-info {
    height: 150rpx;
    flex-flow: column;
    margin-left: 20rpx;
    padding-right: 20rpx;
    flex: 1;
    .title {
      font-size: 30rpx;
      color: #333333;
    }
    .houre {
      font-size: 36rpx;
      .goods-star {
        margin-left: 10rpx;
      }
      .mer-label {
        background: #f5f5f5;
        border-radius: 10rpx;
        font-size: 26rpx;
        color: #666666;
        padding: 8rpx 10rpx;
        margin-left: 10rpx;
      }
      .address {
        font-size: 24rpx;
        color: #999999;
      }
    }
  }
}
</style>
